<template>
  <div class="login-container">
    <div class="box">

      <el-form :rules="rules" ref="ruleForm" :label-position="labelPosition" label-width="80px" :model="ruleForm"
        class="form">
        <div style="color:white;" class="form-title">温岭百科后台系统</div>
        <el-form-item label="账号" style="width: 300px" prop="user">
          <el-input v-model="ruleForm.user"></el-input>
        </el-form-item>
        <el-form-item label="密码" style="width: 300px" prop="region">
          <el-input v-model.number="ruleForm.region"></el-input>
        </el-form-item>
      </el-form>
      <div style="display:flex;">
        <el-button type="primary" class="back" @click="back()">返回</el-button>
        <el-button type="primary" class="login" @click="login('ruleForm')">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        textValue: '',
        labelPosition: 'right',
        ruleForm: {
          user: '',
          region: '',
          type: ''
        },
        rules: {
          user: [{
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }],
          region: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              type: 'number',
              message: '密码必须是数字'
            }
          ]
        }
      }
    },
    methods: {
      back(){
        this.$router.push({
          name:'index'
        })
      },
      login(forname) {

        this.$refs[forname].validate(valid => {
          if (valid) {
            this.$api.home.login({
              user: this.ruleForm.user,
              password: this.ruleForm.region
            }).then(res => {
              console.log(res);
              if (res.data.status === 200) {
                this.$store.commit("setUser", res.data.token)
                localStorage.setItem("ego", JSON.stringify(res.data.token))
                this.$router.push({
                  path: "/admin",
                  // query: { id: id },
                });
              } else {

              }

            })

          } else {
            return '请输入内容'
          }
        })
        //     this.$router.push({
        //       path: "/admin",
        //       // query: { id: id },
        // });

      }
    }
  }

</script>

<style lang="scss" scoped>
  .login-container {

    .box {
      width: 100%;
      height: 936px;
      background-color: #283443;

      // margin: 0 !important;
      // border: 1px solid black;
      // position: absolute;
      // left: 50%;
      // transform: translate(-50%);
      .form {
        position: relative;
        left: 50%;
        transform: translate(-50%);
        background: transparent;

        padding: 223px 0 570px;

        // margin: 0 auto;
        .form-title {
          position: absolute;
          font-size: 36px;
          left: 44%;
          top: 15%;
          background: transparent;
        }

        overflow: hidden;

        >>>.el-form-item__label {
          background: transparent;
          color: aliceblue;
        }

        >>>.el-form-item {
          position: relative;
          left: 50%;
          transform: translate(-50%);
          background: transparent;
        }
      }

      >>>.el-button span {
        background: transparent;
        color: white;
      }

      .login {
        position: absolute;
        left: 53%;
        top: 40%;
        // width:100%;
        margin-bottom: 400px;
        // transform: translate(-50%);
        // background: transparent;
      }
      .back{
        position: absolute;
        left: 47%;
        top: 40%;
        // width:100%;
        margin-bottom: 400px;
      }
    }
  }

</style>>
